<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <button ref="btnRef" @click="num+=1">{{num}}</button>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            num:1
        },
        beforeCreate(){
            console.log("1-beforeCreate")
        },
        created(){
            console.log("2-created");
        },
        beforeMount(){
            console.log("3-beforeMount");
        },
        mounted(){
            console.log("4-mounted");
        },
        // beforeUpdate,updated只有数据状态发生更改以后才会执行.
        // 视图更新之前.数据已经更新
        beforeUpdate(){
            console.log("1-beforeUpdate",this.num,this.$refs.btnRef.innerText)
        },
        // 视图更新后.数据更新
        updated(){
            console.log("2-updated",this.num,this.$refs.btnRef.innerText)
        }
    })
</script>
</html>